<template>
  <el-dialog :title="dialogTitle" @close="dialogClose" :visible="dialogVisible">
    <el-form :model="stuForm" :rules="stuRules" ref="addStuRuleForm">
      <el-form-item label="头像">
        <el-upload
          class="uploadAvatar"
          ref="uploadAvatar"
          action="http://chst.vip/students/uploadStuAvatar"
          list-type="picture-card"
          :on-success="uploadSuccess"
          :on-remove="removeAvatar"
          :limit="limit"
          name="headimgurl"
          :file-list="headimgList"
          :multiple="false"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="stuForm.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="项目" prop="productUrl">
        <el-input v-model="stuForm.productUrl" autocomplete="off"> </el-input>
      </el-form-item>
      <el-form-item label="班级" prop="class">
        <el-input v-model="stuForm.class" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="stuForm.age" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="城市" prop="city">
        <el-input v-model="stuForm.city" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="学历" prop="degree">
        <el-input v-model="stuForm.degree" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input v-model="stuForm.description" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="HIDE_DIALOG">取 消</el-button>
      <el-button type="primary" @click="confirmClick('addStuRuleForm')"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
import { mapState, mapMutations, mapActions } from "vuex";
import * as api from "../../api"; //引入发起请求的api
export default {
  computed: {
    ...mapState(["dialogVisible", "dialogTitle", "currentRow"]),
  },

  data() {
     return {
       showAvatar: true,
       headimgList:[],
       limit:1,//上传文件的数量
       stuRules: {
        name: [
            { required: true, message: "请输入姓名", trigger: "blur" }
            ],
        productUrl: [
          { 
            required: true, message: "请输入项目地址", trigger: "blur" },
        ],
        class: [
            { required: true, message: "请输入班级", trigger: "blur" }
            ],
        age: [{
             required: true, message: "请输入年龄", trigger: "blur" }
             ],
        city: [
            { required: true, message: "请输入城市", trigger: "blur" }
            ],
        degree: [
            { required: true, message: "请输入学历", trigger: "blur" }
            ],
        description: [
            { required: true, message: "请输入描述", trigger: "blur" },
            ],
      },
      stuForm: {
        headimgurl: "",
        name: "",
        productUrl: "",
        class: "",
        age: "",
        city: "",
        degree: "",
        description: "",
      },
      oldForm: {}, //储存stuForm的初始值，便于后续清空dialog的内容
     };
   },

  created() {
    this.oldForm = { ...this.stuForm };
  },

  methods: {
     ...mapMutations(["SHOW_DIALOG", "HIDE_DIALOG", "CHANGE_DIALOG"]),
     ...mapActions(["GET_STULIST"]),

     dialogClose() {
         this.HIDE_DIALOG();
         //清空dialog表单数据
         this.stuForm = this.oldForm; 
         //清空回显头像的数组
         this.headimgList=[]
     },

     uploadSuccess(r) {
      console.log(r);
      //把返回的图片地址添加给stuForm，传给服务器，保存到数据可
      if (r.state) {
        this.stuForm.headimgurl = r.headimgurl;
       if(this.dialogTitle==="编辑学员信息"){
            //把headimgList列表内容设为当前项
            this.headimgList=[{url:r.headimgurl}]
       }
      } else {
        this.$message.error("上传失败");
      }
     },

     removeAvatar(r) {},

      confirmClick(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
            this.limit=1
          this.HIDE_DIALOG();
          //表单校验成功
          //发送请求
          if (this.dialogTitle === "增加学员信息") {
            //发起增加请求
            api.addStuApi(this.stuForm) // 表单中收集到的用户输入数据
              .then((res) => {
                console.log(res);
                if (res.data.state) {
                  //增加成功
                  //重新发起请求，更新表格内容l
                  this.GET_STULIST();
                  this.$message.success("增加成功");
                } else {
                  //增加失败
                  this.$message.error("增加失败");
                }
              });
          } else {
            //发起编辑请求
            api.updateStuApi(this.stuForm)
            .then(res=>{
                console.log(res);
                if(res.data.state){
                    //修改成功，更新视图
                    this.GET_STULIST()
                    this.$message.success("修改成功")
                }else{
                    this.$message.error("更新失败，没有做任何修改或数据不存在")
                    //更新页面
                    this.GET_STULIST()
                }
            })
          }
        } else {
          this.$message.error("请将内容填写完整");
        }
      });
    },
  },

  watch: {
      currentRow(newVal) { // 监听传入的row的数据变化
        console.log(newVal);
        //数据回显，从vuex中获取当前回显得到数据
        // console.log(this.currentRow);
        // console.log(this.stuForm);
        this.stuForm = this.currentRow;//回显变化的row 
        //回显头像
        this.headimgList = [{ url:this.currentRow.headimgurl}]
        //编辑的时候limit为1
        this.limit=2
        },  
    } ,
};
</script>